<template>
  <div>
    <div ref="container" style="height: 150px"></div>
  </div>
</template>

<script>
import { Line } from '@antv/g2plot';
// 引入get方法 ES6模块化规范
import { get } from '@/utils/request'
let moment = require('moment');
// 引入状态辅助函数
import { mapState } from 'vuex'
export default {
  data() {
    return {
      // 存放温度数据
      tempData: [],
      // 图表实例
      linePlot: null
    }
  },
  computed: {
    // 映射公共数据
    ...mapState(['ed'])
  },
  watch: {
    // 监听设备变化
    async ed() {
      let res = await get('/dashboard/pageQueryData', {
        page: 1,
        pageSize: 200,
        engineer_id: this.ed.engineer_id,
        device_id: this.ed.device_id
      });
      res.data.list.forEach((item, index, arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format('HH:mm');
        arr[0].tsp = 53;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.tempData = res.data.list;
      // 重新根据新数据绘制图表
      this.linePlot.changeData(this.tempData);
    }
  },
  methods: {
    moment,
    // 获取温度数据 
    async getTempData() {
      let res = await get('/dashboard/pageQueryData', {
        page: 1,
        pageSize: 200,
        engineer_id: 2,
        device_id: 1
      });
      // [{insert_time,tempature},{},{},{}]
      res.data.list.forEach((item, index, arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format('HH:mm');
        arr[0].tsp = 53;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.tempData = res.data.list;
      this.createLine();
      // console.log(res,'获取响应');
    },
    createLine() {

      const linePlot = new Line(this.$refs.container, {
        data:this.tempData,
        xField: 'insert_time',
        yField: 'tsp',
        stepType: 'vh',
      });

      linePlot.render();
      this.linePlot=linePlot

    },
  },
  created() { },
  mounted() {
    this.getTempData();
  },
};
</script>
<style scoped></style>